import {useNavigate} from "react-router-dom";
import AppProvider from "../../../sources/AppProvider.ts";
import {FC} from "react";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";
import DGTextView from "../../../components/DGTextView.tsx";

interface ChangeAvatarProps {
    state: boolean,
    close: () => void
}

const ChangeAvatar: FC<ChangeAvatarProps> = ({state, close}) => {
    // 获取程序上下文
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();

    // 关闭控制
    const handleClose = (id: number) => {
        // 关闭
        close();
        // 后退
        if (id === 1) router(-1);
    }

    return (<>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout title="更改头像" state={state} close={() => handleClose(1)} PANEL AUTO>
            {/* 未登录提示语 */}
            {!App!.info && <DGTextView Body Bold>您当前未登陆账户，服务不可用！</DGTextView>}
            {/* 已登录 */}
            {App!.info && <DGTextView Body Bold>
                为了适应业务调整和应对高访问流量，避免对服务器资源造成不必要的浪费，我们决定取消头像服务功能。
                此举仅确保界面的合理性与美观度。
            </DGTextView>}
        </DGDialogLayout>

        {/* DGDrawerLayout 样式 */}
        <DGDrawerLayout title="更改头像" state={state} close={() => handleClose(1)} flex="bottom" PANEL AUTO>
            {/* 未登录提示语 */}
            {!App!.info && <DGTextView Body Bold>您当前未登陆账户，服务不可用！</DGTextView>}
            {/* 已登录 */}
            {App!.info && <DGTextView Body Bold>
                为了适应业务调整和应对高访问流量，避免对服务器资源造成不必要的浪费，我们决定取消头像服务功能。
                此举仅确保界面的合理性与美观度。
            </DGTextView>}
        </DGDrawerLayout>
    </>);
}
export default ChangeAvatar;